<template>
  <div>
    <div class="ef-node-form">
      <div class="ef-node-form-header">
        节点详情
      </div>
      <div class="ef-node-form-body">
        <el-form :model="node" ref="dataForm" label-width="80px" :rules="formRules" v-show="type === 'node'">
          <el-form-item v-show="false" label="类型">
            <el-input v-model="node.type" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="节点名称" prop="name">
            <el-input v-model="node.name" @change="save"></el-input>
          </el-form-item>
          <el-form-item label="节点编码" prop="code">
            <el-input v-model="node.code" @change="save"></el-input>
          </el-form-item>
          <el-form-item label="节点描述">
            <el-input v-model="node.desc" @change="save"></el-input>
          </el-form-item>
          <el-form-item v-show="false" label="left坐标">
            <el-input v-model="node.left"></el-input>
          </el-form-item>
          <el-form-item v-show="false" label="top坐标">
            <el-input v-model="node.top"></el-input>
          </el-form-item>
          <!--                   <el-form-item label="ico图标">
                        <el-input v-model="node.ico"></el-input>
                    </el-form-item> -->
          <!--                    <el-form-item label="状态">
                        <el-select v-model="node.state" placeholder="请选择">
                            <el-option
                                    v-for="item in stateList"
                                    :key="item.state"
                                    :label="item.label"
                                    :value="item.state">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
          <!--                    <el-form-item>
                        <el-button type="primary" icon="el-icon-check" @click="save">保存</el-button>
                    </el-form-item> -->

          <el-row :gutter="10" class="mb8">
<!--            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-check" size="mini" @click="save">保存</el-button>
            </el-col> -->
            <el-col :span="1.5">
              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addProp">添加字段</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" :disabled="single"  plain icon="el-icon-edit" size="mini" @click="editProp">编辑字段</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" :disabled="multiple"  plain icon="el-icon-remove" size="mini" @click="delProp">删除字段</el-button>
            </el-col>
          </el-row>


          <el-table v-show="type === 'node'" :data="node.propList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="字段名称" width="80" align="center" prop="propName" />
            <el-table-column label="字段类型" width="80" align="center" prop="propType" />
            <el-table-column label="是否集合" width="80" align="center" prop="isCollect" />
            <el-table-column label="引用字段名称" align="center" prop="partner" />
          </el-table>


        </el-form>

        <el-form :model="line" ref="dataForm" label-width="80px" v-show="type === 'line'">
          <el-form-item label="条件">
            <el-input v-model="line.label"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-close">重置</el-button>
            <el-button type="primary" icon="el-icon-check" @click="saveLine">保存</el-button>
          </el-form-item>
        </el-form>


      </div>
      <!--            <div class="el-node-form-tag"></div>-->
    </div>

    <el-dialog title="添加字段" :visible.sync="propForm.open" width="40%" :close-on-click-modal="false"
      :close-on-press-escape="true">
      <el-form ref="propFormRef" :model="propForm.form" :rules="propForm.formRules" label-width="100px">
        <el-form-item label="字段名称" prop="propName">
          <el-input v-model="propForm.form.propName"></el-input>
        </el-form-item>
        <el-form-item label="数据类型" prop="propType">
          <el-select size="small" filterable clearable style="width: 100%" v-model="propForm.form.propType">
            <el-option v-for="dict in dataTypeOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item label="字段说明" prop="propDesc">
          <el-input v-model="propForm.form.propDesc"></el-input>
        </el-form-item>

        <el-form-item label="是否集合" prop="isCollect">
          <el-select size="small" filterable clearable style="width: 100%" v-model="propForm.form.isCollect">
            <el-option v-for="dict in isCollectOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>

        <el-form-item label="引用字段名称" prop="partner">
          <el-input v-model="propForm.form.partner"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="propSubmit()">保存</el-button>
          <el-button @click="addProp()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>




</template>

<script>
  import {
    cloneDeep
  } from 'lodash'

  export default {
    data() {
      return {
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        visible: true,
        // node 或 line
        type: 'node',
        node: {
           propList: []
        },
        formRules : {
            name: [{
              required: true,
              message: '节点名称不能为空',
              trigger: 'blur'
            }],
            code: [{
              required: true,
              message: '节点编码不能为空',
              trigger: 'blur'
            }]
        },
        line: {},
        data: {},
        stateList: [{
          state: 'success',
          label: '成功'
        }, {
          state: 'warning',
          label: '警告'
        }, {
          state: 'error',
          label: '错误'
        }, {
          state: 'running',
          label: '运行中'
        }],
        dataTypeOptions: [],
        isCollectOptions: [{
          "dictLabel": "否",
          "dictValue": "0"
        }, {
          "dictLabel": "是",
          "dictValue": "1"
        }],
        propForm: {
          open: false,
          form: {
            propName: null,
            propType: null,
            isCollect: null,
            partner: null
          },
          formRules: {
            propName: [{
              required: true,
              message: '字段名称不能为空',
              trigger: 'blur'
            }],
            propType: [{
              required: true,
              message: '字段类型不能为空',
              trigger: 'blur'
            }],
            propDesc: [{
              required: true,
              message: '字段说明不能为空',
              trigger: 'blur'
            }],
            isCollect: [{
              required: true,
              message: '是否集合不能为空',
              trigger: 'blur'
            }]
          }
        }
      }
    },
    methods: {

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection;
        this.single = selection.length != 1
        this.multiple = !selection.length
      },

      addProp() {
        this.propForm.open = !this.propForm.open;
        this.dataTypeOptions = []
        let dataTypeOptions = this.dataTypeOptions;
        this.$parent.data.dataTypeList.forEach(function(d) {
          dataTypeOptions.push({
            "dictLabel": d.dataTypeName,
            "dictValue": d.dataTypeCode
          });
        })

        this.data.nodeList.forEach(function(n) {
          dataTypeOptions.push({
            "dictLabel": n.desc,
            "dictValue": n.name
          });
        })

      },
      editProp() {

      },
      delProp() {

      },
      propSubmit() {
        let row = this.ids[0];
        this.node.propList = this.node.propList? this.node.propList : [];
        let form = JSON.parse(JSON.stringify(this.propForm.form));
        this.$refs["propFormRef"].validate(valid => {
          if (valid) {
             this.node.propList.push(form)
             this.propForm.open = false;
             this.propForm.form = {};
             this.save()
          } else {

          }
        });
      },
      /**
       * 表单修改，这里可以根据传入的ID进行业务信息获取
       * @param data
       * @param id
       */
      nodeInit(data, id) {
        this.type = 'node'
        this.data = data
        data.nodeList.filter((node) => {
          if (node.id === id) {
            this.node = cloneDeep(node)
          }
        })
      },
      lineInit(line) {
        this.type = 'line'
        this.line = line
      },
      // 修改连线
      saveLine() {
        this.$emit('setLineLabel', this.line.from, this.line.to, this.line.label)
      },
      save() {
        debugger
        this.data.nodeList.filter((node) => {
          if (node.id === this.node.id) {
            node.name = this.node.name
            node.code = this.node.code
            node.desc = this.node.desc
            node.propList = this.node.propList
            node.left = this.node.left
            node.top = this.node.top
            node.ico = this.node.ico
            node.state = this.node.state
            this.$emit('repaintEverything')
          }
        })

      }
    }
  }
</script>

<style>
  .el-node-form-tag {
    position: absolute;
    top: 50%;
    margin-left: -15px;
    height: 40px;
    width: 15px;
    background-color: #fbfbfb;
    border: 1px solid rgb(220, 227, 232);
    border-right: none;
    z-index: 0;
  }
</style>
